<template>
	<view class="body" :style="{ height: height + 'px' }">
		<view class="steps"><uni-steps :options="steps" :active="active"></uni-steps></view>

		<view v-if="active === 0" class="change-from">
			<view class="now-phone">
				<view class="title">换绑验证码</view>
				<view class="desc">现有手机接收收到的换绑验证码</view>
				<send-code type="ChangRegister" :phone="user.accountNo" @code="oneCode"></send-code>
			</view>
		</view>

		<view v-if="active === 1" class="change-from">
			<view class="new-phone">
				<view class="title">新手机验证码</view>
				<view class="desc">新手机号和新手机号接收收到的验证码</view>
				<input type="number" @blur="checkPhone" maxlength="11" v-model="newPhone" placeholder="请输入手机号码" />
				<send-code1 type="Register" :phone="newPhone" @code="towCode"></send-code1>
				<view class="default" @tap="submitData" :class="[submit ? 'active-button' : '']">完成</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniSteps from '@/components/uni-steps/uni-steps.vue';
import sendCode from '../../components/common/send-code.vue';
import sendCode1 from '../../components/common/send-code.vue';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
export default {
	components: { uniSteps, sendCode, sendCode1 },
	data() {
		return {
			user: {},
			height: 0,
			steps: [{ title: '获取验证码' }, { title: '新手机号' }],
			active: 0,
			oldCode: '',
			newPhone: '',
			checked: false,
			newCode: '',
			submit: false
		};
	},
	watch: {
		newCode() {
			if (this.newPhone && this.newCode && this.checked) {
				this.submit = true;
			} else {
				this.submit = false;
			}
		}
	},
	methods: {
		checkPhone() {
			if (this.newPhone) {
				let reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[0-9])\d{8}$/;
				if (reg.test(this.newPhone)) {
					this.checked = true;
				} else {
					showToast('手机号码格式不正确');
					this.checked = false;
				}
			}
		},
		oneCode(code) {
			this.oldCode = code;
			this.active = 1;
		},
		towCode(code) {
			this.newCode = code;
		},
		submitData() {
			if (!this.submit) {
				return;
			}
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.updatePhone,
				header: constant.authHead(),
				data: {
					oldCode: this.oldCode,
					newPhone: this.newPhone,
					newCode: this.newCode
				},
				method: 'POST',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						uni.showToast({
							title: '更换手机号成功,请重新登录',
							icon: 'none',
							success() {
								uni.setStorageSync(constant.user, null);
							}
						});
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					console.log(r);
				}
			});
		}
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				this.height = res.windowHeight;
			}
		});
		this.user = uni.getStorageSync(constant.user);
	}
};
</script>

<style lang="less" scoped>
.body {
	background: #f5f7fa;
	border-top: 1rpx solid transparent;
}
.steps {
	margin-top: 35rpx;
	padding: 40rpx 0;
	background-color: #ffffff;
}
.change-from {
	padding: 0 40rpx;
	background-color: #ffffff;
	margin-top: 35rpx;
	.now-phone {
		padding: 40rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}
		.desc {
			font-size: 26rpx;
			color: #999999;
		}
	}

	.new-phone {
		padding: 40rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		input {
			text-align: center;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
			background-color: #eeeeee;
			height: 90rpx;
			width: 65%;
			border-radius: 10rpx;
			color: #7088ff;
			font-weight: 500;
			font-size: 32rpx;
			border: 2rpx dotted #666666;
		}
		.title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}
		.desc {
			font-size: 26rpx;
			color: #999999;
		}

		.default {
			margin-bottom: 20rpx;
			width: 65%;
			height: 100rpx;
			text-align: center;
			line-height: 90rpx;
			color: #ffffff;
			background-color: #999999;
			font-size: 40rpx;
			font-weight: 500;
			border-radius: 40rpx;
		}
		.active-button {
			background: linear-gradient(360deg, #e5be7b 0%, #f9dba9 100%);
		}
	}
}
</style>
